//获取操作对象
var lb = document.querySelector('.max_box')
var rb = document.querySelector('.fdj')
var fdj = document.querySelector('.fd')
var lbp = lb.querySelector('img')
var rbp = rb.querySelector('img')
var lbb = lb.querySelectorAll('li')
//给大盒子对象绑定事件
lb.onmouseover = function () {
    //显示蒙板层和右边的大盒子
    fdj.style.display = 'block'
    rb.style.display = 'block'
}
//隐藏蒙板层和右边的大盒子
lb.onmouseout = function () {
    fdj.style.display = 'none'
    rb.style.display = 'none'
}
//鼠标移动
lb.onmousemove = function () {
    //兼容事件对象
    var e = e || window.event
    //计算蒙板层移动距离
    var fdjl = e.pageX - jsOffsetLeft(lb) - parseInt(fdj.offsetWidth / 2)
    // console.log(fdjl)
    var fdjt = e.pageY - jsOffsetTop(lb) - parseInt(fdj.offsetHeight / 2)
    // console.log(fdjt)
    //设置边界
    var maxx = lb.offsetWidth - fdj.offsetWidth
    var maxy = lb.offsetHeight - fdj.offsetHeight
    //设置图片移动距离
    var imgx, imgy
    //水平方向判断
    if (fdjl <= 0) {
        fdj.style.left = '0px'
        imgx = 0
    } else if (fdjl >= maxx) {
        fdj.style.left = maxx + 'px'
        imgx = maxx;
    } else {
        fdj.style.left = fdjl + 'px'
        imgx = fdjl
    }
    //垂直方向
    if (fdjt <= 0) {
        fdj.style.top = '0px'
        imgy = 0
    } else if (fdjt >= maxy) {
        fdj.style.top = maxy + 'px'
        imgy = maxy
    } else {
        fdj.style.top = fdjt + 'px'
        imgy = fdjt
    }
    //移动右边图片
    rbp.style.left = -1.24 * imgx + 'px'
    rbp.style.top = -1.24 * imgy + 'px'
}

/**  @type {(ele:HTMLElement)=>number} */
function jsOffsetLeft(ele) {
    let sum = 0;

    let eleT = ele;
    while (eleT != document.body) {
        sum += eleT.offsetLeft;
        eleT = eleT.offsetParent;
    }

    return sum;
}

/**  @type {(ele:HTMLElement)=>number} */
function jsOffsetTop(ele) {
    let sum = 0;

    let eleT = ele;
    while (eleT != document.body) {
        sum += eleT.offsetTop;
        eleT = eleT.offsetParent;
    }

    return sum;
}
//点击选择图片
var djj = document.querySelector('.goods_min')
var dj1 = djj.querySelectorAll('img')

var img1 = djj.querySelectorAll('li')

//遍历选择图片
for (let i = 0; i < dj1.length; i++) {
    //添加点击事件
    dj1[i].onclick = function () {
        //遍历选择图片点击事件
        lbp.src = dj1[i].src;
        rbp.src = dj1[i].src;
        for (var j = 0; j < img1.length; j++) {
            img1[j].className = '';
        }
        img1[i].className = 'bgcb';
    }
}
var tap = document.querySelector('.pp')
var tapp = tap.querySelectorAll('span')
var ps = document.querySelectorAll('.ps')
var xijie = document.querySelector('.xijie')
//tap选项卡
for (let z = 0; z < tapp.length; z++) {
    //添加点击事件
    tapp[z].onclick = function () {
        for (var x = 0; x < tapp.length; x++) {
            tapp[x].className = ''
            ps[x].className = 'ps'
        }
        this.className = 'ph'
        ps[z].className = 'ps xijie'
    }
}